<template>
  <div id="app">
    <h2>v-model 双向数据绑定</h2>
    <v-model />
    <hr />
    <h2>TodoList</h2>
    <todo-list />
    <hr />
    <h2>状态（data）VS 属性（props）</h2>
    <reactive-data />
    <hr />
    <h2>计算属性 Computed</h2>
    <Computed />
    <h2>侦听器 Watch</h2>
    <watch />
    <h2>生命周期</h2>
    <Lifecycle />
    <h2>函数式组件</h2>
    <functional-component />
    <h2>指令</h2>
    <Directives />
    <h2>跨层级通信 provide、inject</h2>
    <provide-and-inject />
    <h2>获取跨层级组件实例(拒绝递归) ref</h2>
    <Ref />
    <h2>Template 和 JSX</h2>
    <template-and-JSX />
  </div>
</template>

<script>
import VModel from "./views/vModel/index.vue";
import TodoList from "./views/todoList/index.vue";
import ReactiveData from "./views/reactiveData/index.vue";
import Computed from "./views/computed/index.vue";
import Watch from "./views/watch/index.vue";
import Lifecycle from "./views/lifecycle/index.vue";
import functionalComponent from "./views/functionalComponent/index.vue";
import Directives from "./views/directives/index.vue";
import ProvideAndInject from "./views/provideAndInject/index.vue";
import Ref from "./views/ref/index.vue";
import templateAndJSX from "./views/templateAndJSX/index.vue";

export default {
  name: "App",
  components: {
    VModel,
    TodoList,
    ReactiveData,
    Computed,
    Watch,
    Lifecycle,
    functionalComponent,
    Directives,
    ProvideAndInject,
    Ref,
    templateAndJSX,
  },
  data() {
    return {};
  },
  methods: {},
};
</script>

<!-- 
  scoped 防止污染其他组件，会生成独有的hash 
  如：red[data-v-33df0029]
-->
<style scoped>
h2 {
  color: #ff5500;
}
.red {
  color: red;
}
.green {
  color: green;
}
</style>
